﻿@{Layout = null;}
@model List<DTD.Repositories.Task>
            
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<link  rel="stylesheet" type="text/css" href="@Url.Content("~/Content/calendar/calendar.css")" />
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css' />
<link  rel="stylesheet" type="text/css" href="@Url.Content("~/Content/calendar/jquery.weekcalendar.css")" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type='text/javascript' src="@Url.Content("~/Scripts/calendar/jquery.weekcalendar.js")"></script>
<link href="@Url.Content("~/Content/Button.css")" rel="stylesheet" type="text/css" />

<script type='text/javascript'>

    var year = new Date().getFullYear();
    var month = new Date().getMonth();
    var day = new Date().getDate();

    var eventData = {
        events: [
            @for(int i = 0; i < Model.Count; i++)
            {
                var task = Model[i];
                string catString = "{ 'id': " + task.Id +
                ",'start': new Date(" + task.StartDate.Value.Year + "," +(task.StartDate.Value.Month-1) +","+ task.StartDate.Value.Day + ", "+ task.StartDate.Value.Hour +"),"+
                "'end': new Date(" + task.Deadline.Value.Year + "," +(task.Deadline.Value.Month-1) +","+ task.Deadline.Value.Day + ", "+ task.Deadline.Value.Hour +"),"+
                "'title': '"+ task.Title +"' }" +
                (i == (Model.Count - 1) ? "" : ",");
                MvcHtmlString cat = MvcHtmlString.Create(catString);
                @cat
            }
		]
    };

    $(document).ready(function () {

        $('#calendar').weekCalendar({
            timeslotsPerHour: 2,
            draggable: function (calEvent, $event) {
                return false;
            },
            resizable: function (calEvent, $event) {
                return false;
            },
            height: function ($calendar) {
                return $(window).height() - $("h1").outerHeight();
            },
            eventRender: function (calEvent, $event) {
                if (calEvent.end.getTime() < new Date().getTime()) {
                    $event.css("backgroundColor", "#aaa");
                    $event.find(".time").css({ "backgroundColor": "#999", "border": "1px solid #888" });
                }
            },
            eventNew: function (calEvent, $event) {
            },
            eventDrop: function (calEvent, $event) {
            },
            eventResize: function (calEvent, $event) {
            },
            eventClick: function (calEvent, $event) {
            },
            eventMouseover: function (calEvent, $event) {
            },
            eventMouseout: function (calEvent, $event) {
            },
            noEvents: function () {

            },
            data: eventData
        });

    });

</script>
</head>
<body>
    <a class="button tiny gray" href="/Home/Index"><span>Обратно</span></a>
    <div id='calendar'></div>
</body>
</html>
